.el-collapse {
  .collapse__title {
    font-weight: 600;
    padding: 0 8px;
    font-size: 1.2em;
    line-height: 1.1em;
  }

  .el-collapse-item__content {
    padding: 0 8px;
  }
}

.el-divider--horizontal {
  margin-bottom: 10px;
  margin-top: 10px;
}

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type='file'] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.cell {
  .el-tag {
    margin-right: 0px;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0px;
    }
  }
}

/*-------------Dialog-------------**/
.el-overlay {
  overflow: hidden;
  margin-top: 0 !important;

  .el-overlay-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .el-dialog {
      margin: 0 auto !important;

      .el-dialog__body {
        padding: 15px;
      }

      .el-dialog__header {
        padding: 16px 16px 8px 16px;
        box-sizing: border-box;
        border-bottom: 1px solid var(--brder-color);
        margin-right: 0;
      }
    }
  }
}

.el-dialog__body {
  max-height: calc(90vh - 111px) !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-dialog {
  background: #e9f2ff !important;
  border-radius: 5px !important;
  padding: 0 !important;
}

.el-dialog__header {
  background-color: transparent;
  border-bottom: 0 !important;
  padding: 20px !important;
  background: url('/images/dialog-title-bg.png') no-repeat right / contain;
}

.el-dialog__close {
  font-size: 20px !important;
  top: 10px;
  right: 10px;
}

.el-dialog__title {
  position: relative;
  padding-left: 22px;
}

.el-dialog__body {
  background: #fff !important;
}

.el-dialog__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('/images/card-title-prefix.png') no-repeat center / contain;
}

.el-dialog__footer {
  padding: 0 20px 20px 20px;
  background-color: #fff;
  border-radius: 5px;
}

/* Global search form compact spacing */
.search-form {
  .el-form-item {
    margin-bottom: 0 !important;

    .el-form-item__content {
      .el-date-editor {
        width: 100% !important;
      }
    }
  }
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-dropdown .el-dropdown-link {
  color: var(--el-color-primary) !important;
}

/* merged table cells background */
.el-table .colspan-cell {
  background: #F2F2F2 !important;
}

/* 当 el-form 的 inline 属性为 true 时 */
/* 设置 label 的宽度默认为 68px */
.el-form--inline .el-form-item__label {
  width: 68px;
}

/* 设置 el-select 的宽度默认为 240px */
.el-form--inline .el-select {
  width: 240px;
}

/* 设置 el-input 的宽度默认为 240px */
.el-form--inline .el-input {
  width: 240px;
}

/* 设置 el-message-box 消息弹框内容强制换行 */
.el-message-box .el-message-box__message {
  word-break: break-word;
}

// 全局设置表单组件背景色为 #F2F6F7 并移除边框
$form-bg-color: #F2F6F7;

// 通用表单组件样式mixin
@mixin form-component-style {
  background-color: $form-bg-color !important;
  border: none !important;
  box-shadow: none !important;
}

// 输入框
.el-input {
  &__inner,
  &__wrapper {
    @include form-component-style;
  }
}

// 数字输入框
.el-input-number {
  @include form-component-style;

  .el-input {
    &__inner,
    &__wrapper {
      @include form-component-style;
    }
  }
}

// 标签输入框
.el-tag-input {
  .el-input {
    &__inner,
    &__wrapper {
      @include form-component-style;
    }
  }
}

// 文本域
.el-textarea {
  &__inner {
    @include form-component-style;
  }
}

// 选择器
.el-select {
  .el-select {
    &__wrapper {
      @include form-component-style;
    }

    &__input {
      background-color: transparent !important;
    }

    &__caret {
      color: #111;
    }
  }

  .el-input {
    &__inner,
    &__wrapper {
      @include form-component-style;
    }
  }
}

// 级联选择器
.el-cascader {
  .el-input {
    &__inner,
    &__wrapper {
      @include form-component-style;
    }
  }
}

// 时间选择器
.el-date-editor {
  @include form-component-style;

  .el-input {
    &__inner,
    &__wrapper {
      @include form-component-style;
    }
  }

  // 时间范围选择器
  &--daterange,
  &--datetimerange {
    @include form-component-style;

    .el-input {
      &__inner,
      &__wrapper {
        @include form-component-style;
      }
    }
  }
}

// 树形选择器
.el-tree-select {
  .el-input {
    &__inner,
    &__wrapper {
      @include form-component-style;
    }
  }
}

// 单选框组
.el-radio {
  &__input {
    .el-radio__inner {
      @include form-component-style;
    }
  }
}

// 多选框
.el-checkbox {
  &__input {
    .el-checkbox__inner {
      @include form-component-style;
    }
  }
}

// 开关
.el-switch {
  &__core {
    @include form-component-style;
  }
}

// 评分
.el-rate {
  .el-rate__item {
    .el-rate__icon {
      background-color: transparent;
    }
  }
}

// 滑块
.el-slider {
  &__runway {
    @include form-component-style;
  }
}

// 颜色选择器触发器
.el-color-picker {
  &__trigger {
    @include form-component-style;
  }
}

// 移除聚焦状态的边框和阴影
%focus-style {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.el-input {
  &__inner:focus,
  &__wrapper:focus,
  &__wrapper:focus-within {
    @extend %focus-style;
  }
}

.el-textarea {
  &__inner:focus {
    @extend %focus-style;
  }
}

.el-select {
  .el-input {
    &__inner:focus,
    &__wrapper:focus {
      @extend %focus-style;
    }
  }

  .el-select {
    &__wrapper:focus,
    &__wrapper:focus-within {
      @extend %focus-style;
    }
  }

  &.is-focused {
    .el-select__wrapper {
      @extend %focus-style;
    }
  }
}

.el-cascader {
  .el-input {
    &__inner:focus,
    &__wrapper:focus {
      @extend %focus-style;
    }
  }
}

.el-date-editor {
  .el-input {
    &__inner:focus,
    &__wrapper:focus {
      @extend %focus-style;
    }
  }
}

// 表格表头背景色
.el-table {
  th.el-table__cell {
    background-color: $form-bg-color !important;
  }

  .el-table__header-wrapper {
    .el-table__header {
      th {
        background-color: $form-bg-color !important;
      }
    }
  }
}

.bi-dialog {
  background: url('@/assets/bi_images/dialog-bg.png') no-repeat center / 100% 100% !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff;
  padding-bottom: 12px;
  /* 全局弹窗样式（大屏） */
  .el-overlay {
    backdrop-filter: blur(1px);
  }

  .el-dialog__header,
  .el-dialog__body,
  .el-dialog__footer {
    background: transparent !important;
    color: #fff !important;
  }

  .el-dialog__title {
    color: #e9f6ff !important;
    font-weight: 700;
  }

  .el-dialog__headerbtn .el-dialog__close {
    color: #b9d8ff !important;
  }
}

// 大号规则弹窗：使用大背景图 + 统一内边距
.bi-dialog-big {
  @extend .bi-dialog;
  background: url('@/assets/bi_images/bim/big-dialog-bg.png') no-repeat center / 100% 100% !important;
    padding: 20px 40px !important;
}
